<template>
    <div class="big-screen-page-box">
      <BigScreenHeader></BigScreenHeader>
      <div class="one" style="width:303px;height:calc(100% - 95px);float:left;padding:5px">
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsLine url="/user-center/echartsData"
                       :xAxisAxisTick="true"
                       :xAxisLineShow="true"
                       :areaStyle="true"
                       :smooth="true"
                       :xAxisLabelShow="true"
                       :markPoint="true"
                       :erectName="true"
                       yAxisSplitValueUit="单位(K)"/>
        </div>

        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsLine url="/user-center/echartsData2"
                       :yAxisSplitLineShow="false"/>
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsBar url="/user-center/echartsData"
                      :seriesLabelShow="true"
                      :xAxisLabelShow="true"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:288px;">
          <EchartsBar url="/user-center/echartsData"
                      :xAxisLabelShow="true"
                      :richNumBar="true"
                      :showBackground="true"
                      seriesLabelPosition="right"
                      :seriesLabelShow="true"
                      :richBar="true"/>
        </div>
      </div>

      <div class="two" style="width:303px;calc(100% - 95px);float:left;padding:5px">

        <div class="echarts-box" style="width:100%;height:288px;">
          <EchartsBar url="/user-center/echartsData2"
                      :xAxisLabelShow="true"
                      :richNumBar="true"
                      :showBackground="true"
                      seriesLabelPosition="right"
                      :seriesLabelShow="true"
                      :barStack="true"
                      :richBar="true"/>
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsBar url="/user-center/echartsData"
                      :xAxisLabelShow="true"
                      :erectName="true"
                      :grid="{'bottom':'80',left:20}"
                      :markPoint="true"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsBar url="/user-center/echartsData"
                      :xAxisLabelShow="true"
                      :xAxisRotate="40"
                      :showBackground="true"
                      :singBaseModel="true"
                      :grid="{'bottom':'80',left:20}"
                      :barColor="['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
                      :markPoint="true"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsBar url="/user-center/echartsData2"
                      :xAxisLabelShow="true"
                      :barColor="['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
                      :barStack="true"
          />
        </div>
      </div>

      <div class="three" style="width:303px;height:calc(100% - 95px);float: left;padding:5px">
        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsPie url="/user-center/echartsData"
                      :seriesRadius="['30%','60%']"
                      :color="['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsPie url="/user-center/echartsData"
                      :seriesLabelShow="true"
                      :color="['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsPie url="/user-center/echartsData"
                      seriesRoseType="radius"
                      :color="['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:288px;">
          <EchartsBar url="/user-center/echartsData"
                      :xAxisLabelShow="true"
                      :showBackground="true"
                      seriesLabelPosition="right"
                      :seriesLabelShow="true"
                      :grid="{bottom:10,left:50,top:10}"

                      :seriesItemStyle="{normal:{barBorderRadius:10}}"
                      :richBar="true"/>
        </div>

      </div>
      <div class="four" style="width:303px;calc(100% - 95px);float: left;padding:5px">
        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsBar url="/user-center/echartsData"
                      :xAxisLabelShow="true"
                      :barColor="['#FFA100', '#00A3E0', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
                      :customSymbol="true"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsSexPie url="/user-center/sex"/>
        </div>

        <div class="echarts-box" style="width:100%;height:218px;">

          <Echarts3DBar url="/user-center/echartsData"
                        :xAxisLabelShow="true"
                        :erectName="true"
                        :grid="{bottom:50,left:20,top:0}"
                        barWidth="10"/>
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">

          <Echarts3DCylinder url="/user-center/echartsData"
                             :erectName="true"
                             :seriesLabelShow="false"
                             :xAxisLabelShow="true"
                             :showBackground="true"
                             :grid="{bottom:50,left:20,top:0}"
                             barWidth="20"/>
        </div>
      </div>

      <div class="five" style="width:303px;height:calc(100% - 95px);float: left;padding:5px">
        <div class="echarts-box" style="width:100%;height:450px;">

          <EchartsBar url="/user-center/echartsData"
                      :xAxisLabelShow="true"
                      :horizontal="true"
                      :richBar="true"
                      barWidth="10"
                      :barColor="['#00A3E0', '#00A3E0', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
          />
        </div>


        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsPie url="/user-center/echartsData"
                      itemStyleBorderRadius="5"
                      itemStyleBorderWidth="2"
                      :seriesRadius="['30%','60%']"
                      :color="['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">

          <EchartsHalfRing url="/user-center/sex"

          />
        </div>
      </div>

      <div class="sex" style="width:303px;height:calc(100% - 95px);float: left;padding:5px">
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsBar url="/user-center/echartsData"
                      :autoMove="true"
                      :xAxisLabelShow="true"
                      :xAxisRotate="40"
                      :showBackground="true"
                      :grid="{'bottom':'50',left:20}"
          />
        </div>
        <div class="echarts-box" style="width:100%;height:218px;">
          <EchartsLine url="/user-center/echartsData"
                      :autoMove="true"
                      :xAxisLabelShow="true"
                      :xAxisRotate="40"
                      :showBackground="true"
                      :grid="{'bottom':'50',left:20}"
          />
        </div>

        <div class="echarts-box" style="width:100%;height:218px;">
          <Echarts3DBar url="/user-center/echartsData"
                       :autoMove="true"
                       :xAxisLabelShow="true"
                       :xAxisRotate="40"
                       :showBackground="true"
                       :grid="{'bottom':'50',left:20}"
          />
        </div>

        <div class="echarts-box" style="width:100%;height:218px;">
          <Echarts3DPie url="/user-center/echartsData"
          />
        </div>
      </div>

    </div>
</template>